precision lowp float;
varying vec2 vUv;
// 获取时间
uniform float uTime;

#define PI 3.1415926535897932384626433832795

// 随机方法
float random (vec2 st) {
    return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
}

// 旋转函数
vec2 rotate(vec2 uv, float rotation, vec2 mid){
    return vec2(
      cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
      cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
    );
}



// 噪声函数
float noise (in vec2 _st) {
    vec2 i = floor(_st);
    vec2 f = fract(_st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    vec2 u = f * f * (3.0 - 2.0 * f);

    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}



//	Classic Perlin 2D Noise 
//	by Stefan Gustavson
//
vec4 permute(vec4 x)
{
    return mod(((x*34.0)+1.0)*x, 289.0);
}

vec2 fade(vec2 t)
{
    return t*t*t*(t*(t*6.0-15.0)+10.0);
}

float cnoise(vec2 P)
{
    vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
    vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
    Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
    vec4 ix = Pi.xzxz;
    vec4 iy = Pi.yyww;
    vec4 fx = Pf.xzxz;
    vec4 fy = Pf.yyww;
    vec4 i = permute(permute(ix) + iy);
    vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
    vec4 gy = abs(gx) - 0.5;
    vec4 tx = floor(gx + 0.5);
    gx = gx - tx;
    vec2 g00 = vec2(gx.x,gy.x);
    vec2 g10 = vec2(gx.y,gy.y);
    vec2 g01 = vec2(gx.z,gy.z);
    vec2 g11 = vec2(gx.w,gy.w);
    vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
    g00 *= norm.x;
    g01 *= norm.y;
    g10 *= norm.z;
    g11 *= norm.w;
    float n00 = dot(g00, vec2(fx.x, fy.x));
    float n10 = dot(g10, vec2(fx.y, fy.y));
    float n01 = dot(g01, vec2(fx.z, fy.z));
    float n11 = dot(g11, vec2(fx.w, fy.w));
    vec2 fade_xy = fade(Pf.xy);
    vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
    float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
    return 2.3 * n_xy;
}


vec4 permute2(vec4 x) {
  return mod((34.0 * x + 1.0) * x, 289.0);
}

vec2 noise2(vec2 P) {
#define K 0.142857142857 // 1/7
#define K2 0.0714285714285 // K/2
#define jitter 0.8 // jitter 1.0 makes F1 wrong more often
	vec2 Pi = mod(floor(P), 289.0);
 	vec2 Pf = fract(P);
	vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);
	vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);
	vec4 p = permute2(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));
	p = permute2(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));
	vec4 ox = mod(p, 7.0)*K+K2;
	vec4 oy = mod(floor(p*K),7.0)*K+K2;
	vec4 dx = Pfx + jitter*ox;
	vec4 dy = Pfy + jitter*oy;
	vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared
	// Sort out the two smallest distances
#if 0
	// Cheat and pick only F1
	d.xy = min(d.xy, d.zw);
	d.x = min(d.x, d.y);
	return d.xx; // F1 duplicated, F2 not computed
#else
	// Do it right and find both F1 and F2
	d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
	d.xz = (d.x < d.z) ? d.xz : d.zx;
	d.xw = (d.x < d.w) ? d.xw : d.wx;
	d.y = min(d.y, d.z);
	d.y = min(d.y, d.w);
	return sqrt(d.xy);
#endif
}

void main(){

    // 1.通过顶点对应的uv，决定每一个像素在uv的位置，通过这个x,y设置颜色
    // gl_FragColor = vec4(vUv,0.0,1.0);

    // 2.对一每种变形
    // gl_FragColor = vec4(vUv,1.0,1.0);

    // 3.利用uv实现渐变 从左到右
    // float strength =vUv.x;
    // gl_FragColor = vec4(strength,strength,1.0,1.0);

    // 4.利用uv实现渐变 从下到上
    // float strength =vUv.y;
    // gl_FragColor = vec4(strength,strength,1.0,1.0);

    // 5.利用uv实现渐变 从上到下
    // float strength =1.0 - vUv.y;
    // gl_FragColor = vec4(strength,strength,1.0,1.0);

    // 6.利用uv实现短范围内渐变
    // float strength =vUv.y * 10.0;
    // gl_FragColor = vec4(strength,strength,1.0,1.0);

    // 7.利用取模达到反复效果
    // T mod(T x, T y)  T mod(T x, float y)	取x,y的余数
    // float strength = mod(vUv.y * 10.0,1.0);
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 8.利用step
    // T step(T edge, T x)  T step(float edge, T x)	如果 x<edge 返回 0.0 否则返回1.0
    // T mod(T x, T y)  T mod(T x, float y)	取x,y的余数
    // float strength = mod(vUv.x * 10.0,1.0);
    // float strength = mod(vUv.y * 10.0,1.0);
    // strength = step(0.5,strength);
    // strength = step(0.2,strength);
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 9.条纹相加 相乘 相减
    // float strength =  step(0.8,mod(vUv.x * 10.0,1.0));
    // strength +=  step(0.8,mod(vUv.y * 10.0,1.0));
    // strength *=  step(0.8,mod(vUv.y * 10.0,1.0));
    // strength -=  step(0.8,mod(vUv.y * 10.0,1.0));
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 9.条纹偏移与T形图
    // float strength =  step(0.2,mod(vUv.x * 10.0,1.0));
    // strength *=  step(0.2,mod(vUv.y * 10.0,1.0));
    //  float barx =  step(0.5,mod((vUv.x+uTime*0.1) * 10.0,1.0)) * step(0.8,mod(vUv.y * 10.0,1.0));
    
    // float barx =  step(0.5,mod(vUv.x* 10.0 -0.2,1.0)) * step(0.8,mod(vUv.y * 10.0,1.0));
    // float bary =  step(0.5,mod(vUv.y * 10.0,1.0)) * step(0.8,mod(vUv.x * 10.0,1.0));
    // float strength = barx+bary;
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 9.利用绝对值
    // float strength = abs(vUv.y - 0.5 );
    // float strength = abs(vUv.x - 0.5 );
    // gl_FragColor = vec4(strength,strength,1.0,1.0);

    // 10.利用最小值与最大值
    // float strength = min(abs(vUv.x - 0.5 ),abs(vUv.y - 0.5 ));
    // float strength = max(abs(vUv.x - 0.5 ),abs(vUv.y - 0.5 ));
    // gl_FragColor = vec4(strength,strength,1.0,1.0);


    // 11.利用最小值与最大值+step
    // float strength = step(0.2,max(abs(vUv.x - 0.5 ),abs(vUv.y - 0.5 )));
    // gl_FragColor = vec4(strength,strength,1.0,1.0);

    // 12.小正方形
    // float strength = 1.0 - step(0.2,max(abs(vUv.x - 0.5 ),abs(vUv.y - 0.5 )));
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 13.利用取整，实现条纹渐变
    // float strength = floor(vUv.x*10.0)/10.0;
    // float strength = floor(vUv.y*10.0)/10.0;
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 14.利用取整，实现方块渐变
    // float strength = floor(vUv.x*15.0)/15.0;
    // strength *= floor(vUv.y*10.0)/10.0;
    // strength += floor(vUv.y*15.0)/15.0;
    // 向上取整
    // float strength = ceil(vUv.x*15.0)/15.0*ceil(vUv.y*15.0)/15.0;
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 15.随机效果
    // float strength = random(vUv);
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 16.随机效果+取整 随机格子
    // float strength = ceil(vUv.x*15.0)/15.0*ceil(vUv.y*15.0)/15.0;
    // strength = random(vec2(strength,strength));
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 17.根据lenght返回向量长度 
    // float length(float x) 计算矢量的长度 x 指定计算长度的向量。
    // float strength = length(vUv);
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 18.根据distance返回2个向量的距离
    // float distance(float p0, float p1)  float distance(vec2 p0, vec2 p1)   float distance(vec3 p0, vec3 p1)  
    // 计算两点之间的距离 p0 指定两个点中的第一个点 p1 指定两个点中的第二个点
    // float strength = distance(vUv,vec2(0.5,0.5));
    // float strength = distance(vUv,vec2(0.5));
    // float strength = 1.0-distance(vUv,vec2(0.5));
    // gl_FragColor = vec4(strength,strength,strength,1.0);

    // 19.根据相除，实现星星
    // float strength = 0.15 / distance(vUv,vec2(0.5,0.5)) -1.0;
    // gl_FragColor = vec4(strength,strength,strength,strength);

    // 20.设置vUv水平或者竖直变量
    // float strength = 0.3 / distance(vec2(vUv.x,(vUv.y-0.5)*5.0),vec2(0.5,0.5)) -1.0;
    // gl_FragColor = vec4(strength,strength,strength,1);

    // 21.十字交叉的星星
    // float strength = 0.25 / distance(vec2(vUv.x,(vUv.y-0.5)*5.0+0.5),vec2(0.5,0.5)) -1.0;
    // strength += 0.25 / distance(vec2(vUv.y,(vUv.x-0.5)*5.0+0.5),vec2(0.5,0.5)) -1.0;
    // gl_FragColor = vec4(strength,strength,strength,1);

    // 22.旋转十字交叉的星星
    // vec2 rotateUv = rotate(vUv,3.14/4.0,vec2(0.5));//45度
    // vec2 rotateUv = rotate(vUv,uTime,vec2(0.5));
    // vec2 rotateUv = rotate(vUv,uTime*3.0,vec2(0.5));
    // float strength = 0.25 / distance(vec2(rotateUv.x,(rotateUv.y-0.5)*5.0+0.5),vec2(0.5,0.5)) -1.0;
    // strength += 0.25 / distance(vec2(rotateUv.y,(rotateUv.x-0.5)*5.0+0.5),vec2(0.5,0.5)) -1.0;
    // gl_FragColor = vec4(strength,strength,strength,1);


   // 23.圆
   // float strength = distance(vUv,vec2(0.5));    
   // float strength = step(0.5,distance(vUv,vec2(0.5))+0.25);
   // float strength = 1.0- step(0.5,distance(vUv,vec2(0.5))+0.25);
   // gl_FragColor = vec4(strength,strength,strength,1);


    // 23.圆环 
    // float strength = step(0.5,distance(vUv,vec2(0.5))+0.35);
    // strength *= (1.0- step(0.5,distance(vUv,vec2(0.5))+0.25));
    // gl_FragColor = vec4(strength,strength,strength,1);


   // 24.渐变圆
   // float strength = abs(distance(vUv,vec2(0.5))-0.25);
   // gl_FragColor = vec4(strength,strength,strength,1);

   // 25.圆环
   // float strength = 1.0 - step(0.1,abs(distance(vUv,vec2(0.5))-0.25));
   // gl_FragColor = vec4(strength,strength,strength,1);

   // 26.波浪环
   // vec2 waveUv = vec2(
   //     vUv.x+sin(vUv.y*80.0)*0.1,
   //     vUv.y+sin(vUv.x*30.0)*0.1
   // );
   // float strength = 1.0 - step(0.01,abs(distance(waveUv,vec2(0.5))-0.25));
   // gl_FragColor = vec4(strength,strength,strength,1);

   // 27.根据角度显示视图
   // float angle = atan(vUv.x,vUv.y);
   // float strength = angle;
   // gl_FragColor = vec4(strength,strength,strength,1);

   // 28.根据角度实现螺旋渐变
   // float angle = atan(vUv.x-0.5,vUv.y-0.5);
   // float strength = (angle+3.14)/6.28;
   // gl_FragColor = vec4(strength,strength,strength,1);

    // 29.实现雷达扫射
    // // vec2 rotateUv = rotate(vUv,3.14*0.25,vec2(0.5));
    // vec2 rotateUv = rotate(vUv,-uTime*5.0,vec2(0.5));
    // // float alpha =  1.0 - step(0.5,distance(vUv,vec2(0.5)));
    // float angle = atan(rotateUv.x-0.5,rotateUv.y-0.5);
    // float strength = (angle+3.14)/6.28;
    // gl_FragColor =vec4(strength,strength,strength,1);

    // 30.万花筒
    // float angle = atan(vUv.x-0.5,vUv.y-0.5) / PI;
    // float strength = mod(angle*10.0,1.0);
    // gl_FragColor =vec4(strength,strength,strength,1);

    // 31.光芒四射
    // float angle = atan(vUv.x-0.5,vUv.y-0.5) / (PI * 2.0);
    // float strength = sin(angle*100.0);
    // gl_FragColor =vec4(strength,strength,strength,1);

    
    // 32.使用噪声实现烟雾、波纹效果
    // float strength = noise(vUv * 10.0);
    // gl_FragColor =vec4(strength,strength,strength,1);

    // float strength = step(0.5,noise(vUv * 100.0));
    // gl_FragColor =vec4(strength,strength,strength,1);

    // float strength = step(0.5,noise(vUv * 10.0+uTime*10.0));
    // gl_FragColor =vec4(strength,strength,strength,1);

    // float strength = abs(cnoise(vUv * 10.0));
    // gl_FragColor =vec4(strength,strength,strength,1);

    // float strength = abs(cnoise(vUv * 10.0));
    // float strength = 1.0 - abs(cnoise(vUv * 10.0));
    // gl_FragColor =vec4(strength,strength,strength,1);
    
    // float strength = sin(cnoise(vUv * 10.0) * 5.0+uTime);
    // gl_FragColor =vec4(strength,strength,strength,1);

    // float strength = step(0.5,sin(cnoise(vUv * 10.0) * 15.0));
    // gl_FragColor =vec4(strength,strength,strength,1);

    // 33.颜色混合效果
    // vec3 color1 = vec3(0.0,0.0,0.0);
    vec3 color1 = vec3(1.0,0.0,1.0);
    vec3 color2 = vec3(1.0,1.0,0.0);
    // float strength = step(0.5,sin(cnoise(vUv * 10.0) * 15.0));

    // 取x,y的线性混合,x*(1-a)+y*a
    // vec3 mixColor = mix(color1,color2,strength);
  
    // vec3 uvColor = vec3(1.0,vUv);

    // gl_FragColor =vec4(mixColor,1);
    // vec3 mixColor = mix(color1,uvColor,strength);
    // gl_FragColor =vec4(mixColor,1);


    // 34.使用
    vec2 vUv_ = vUv;
	vUv_ -= 0.5;
	vUv_ *= 0.7;
    vec2 F = noise2(vUv_*40.*(.1+1.0-dot(vUv_,vUv_)*5.));

	float facets = 0.1+(F.y-F.x);
	float dots = smoothstep(0.05, 0.1, F.x);
	float n = facets * dots;
	n = step(.2,facets)*dots;
    // vec3 mixColor = mix(color1,color2,n);
    gl_FragColor =vec4(n,n,n,1);

}